<template>
  <div>
    <a-form layout="inline" class="formModel" style="margin:20px 0px 20px">
      <a-row :gutter="48">
        <a-col :md="6" :sm="24"> </a-col>
        <a-col :md="6" :sm="24"> </a-col>
      
        <a-col :md="12" :sm="24" style="text-align:right">
          <a-range-picker
            :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
            @change="onChange"
            v-model="showTime"
            style="width:300px"
          />
        </a-col>
      </a-row>
    </a-form>
    <div id="secondContainer"></div>
  </div>
</template>

<script>
import { getQkComplainMonth } from '@/api/qkApi'
import moment from 'moment'
import { StackedColumnLine } from '@antv/g2plot'
import {} from '@/utils/util'
import {} from '@/api/public'
export default {
  data() {
    return {
      info: {},
      searchType: 1,
      queryParam: {},
      chartPlot: '',
      showTime: '',
      showPage: false,
      dayshowPage: false
    }
  },
  created() {
    var myDate = new Date()
    this.queryParam.startTime = myDate.getFullYear() + '-01' + '-01' + ' 00:00:00'
    this.queryParam.endTime = moment()
      .endOf('day')
      .format('YYYY-MM-DD HH:mm:ss')
    this.showTime = [moment(this.queryParam.startTime), moment(this.queryParam.endTime)]
    this.getDataInfo()
  },
  mounted() {},
  methods: {
    // 标签切换
    callBack(key) {},
    //派单时间
    onChange(date, dateString) {
      if (dateString[0].length == 0) {
        delete this.queryParam.startTime
        delete this.queryParam.endTime
      } else {
        this.queryParam.startTime = dateString[0] + ' 00:00:00'
        this.queryParam.endTime = dateString[1] + ' 23:59:59'
      }
      this.searchType = 2
      this.getDataInfo()
    },
    moment,
    //快开图标 显示回单数据
    charInit(uvBillData, transformData) {
      this.chartPlot = new StackedColumnLine(document.getElementById('secondContainer'), {
        title: {
          visible: false,
          text: '堆叠柱+折线混合图',
          alignTo: 'middle'
        },
        description: {
          visible: false,
          text: '堆叠柱+折线混合图表',
          alignTo: 'middle'
        },
        data: [uvBillData, transformData],
        xField: '日期',
        yField: ['value', 'linevalue'],
        lineSeriesField: 'lineType',
        columnStackField: 'type'
      })
      this.chartPlot.render()
    },
    typeChange() {
      this.searchType = 2
      this.getDataInfo()
    },
    //表格数据查询
    getDataInfo() {
      getQkComplainMonth(this.queryParam).then(
        res => {
          if (res.code == 200) {
            let dataList = []
            let dataLineList = []
            res.data.map(function(currentValue, index, arr) {
              let infoA = {}
              let infoB = {}
              let infoC = {}
              let infoD = {}
              let infoE = {}
              let infoF = {}
              infoA.type = '酒店总量'
              infoA.日期 = currentValue.time
              infoA.value = currentValue.hotelTotalNum
              infoB.type = '非酒店总量'
              infoB.日期 = currentValue.time
              infoB.value = currentValue.totalNum - currentValue.hotelTotalNum
              infoC.日期 = currentValue.time
              infoC.linevalue = Math.abs(currentValue.rate * 100)
              infoC.lineType = '及时率'
              infoD.日期 = currentValue.time
              infoD.linevalue = Math.abs(currentValue.hotelRate * 100)
              infoD.lineType = '酒店及时率'

              infoE.日期 = currentValue.time
              infoE.linevalue = Math.abs(currentValue.repeatRate * 100)
              infoE.lineType = '重复率'
              infoF.日期 = currentValue.time
              infoF.linevalue = Math.abs(currentValue.satisfaction * 100)
              infoF.lineType = '满意度'
              dataList.push(infoA)
              dataList.push(infoB)
              dataLineList.push(infoC)
              dataLineList.push(infoD)
              dataLineList.push(infoE)
              dataLineList.push(infoF)
            })
            if (this.searchType == 1) {
              this.charInit(dataList, dataLineList)
            } else {        
              this.chartPlot.destroy()
              this.charInit(dataList, dataLineList)
            }
          } else {
            this.$message.error(res.msg)
          }
        },
        error => {
          this.$message.error(error)
        }
      )
    }
  }
}
const uvBillData = [
  { time: '2019-03', value: 350, type: 'uv' },
  { time: '2019-04', value: 900, type: 'uv' },
  { time: '2019-05', value: 300, type: 'uv' },
  { time: '2019-06', value: 450, type: 'uv' },
  { time: '2019-07', value: 470, type: 'uv' },
  { time: '2019-03', value: 220, type: 'bill' },
  { time: '2019-04', value: 300, type: 'bill' },
  { time: '2019-05', value: 250, type: 'bill' },
  { time: '2019-06', value: 220, type: 'bill' },
  { time: '2019-07', value: 362, type: 'bill' }
]

const transformData = [
  { time: '2019-03', count: 800 },
  { time: '2019-04', count: 600 },
  { time: '2019-05', count: 400 },
  { time: '2019-06', count: 380 },
  { time: '2019-07', count: 220 }
]
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.fk1 {
  width: 12px;
  height: 12px;
}
.fkcompany {
  font-size: 12px;
  font-weight: 500;
  color: #3e3e3e;
  margin-left: 10px;
  margin-top: -2px;
}
.rangePicker {
  width: 220px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}
.weidabiao1 {
  float: right;
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  // padding-top: 1px;
}

.weidabiao1-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5dce3c;
  float: right;
}
.weidabiao2-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #e5703e;
  float: right;
}
.weidabiao3-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5687f4;
  float: right;
}
</style>
